import { EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
import {
  ActionType,
  ModalForm,
  ProColumns,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-components";
import { ProTable, TableDropdown } from "@ant-design/pro-components";
import { Button, message } from "antd";
import { useRef } from "react";
import axios from "../../../utils/axios";
import request from "umi-request";

type GithubIssueItem = {
  depId: number;
  depName: string;
  teeqArrivalTime: string;
  teeqEquipmentCode: number;
  teeqEquipmentModel: string;
  teeqEquipmentName: string;
  teeqEquipmentState: number;
  teeqEquipmentType: string;
  teeqId: number;
  teeqPlacementPosition: string;
  teeqProofreadingCycle: number;
  teeqProofreadingTime: string;
  userId: number;
  userName: string;
};

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: "序号",
    dataIndex: "depId",
    key: "depId",
    valueType: "indexBorder",
    width: 48,
  },
  {
    title: "设备类别",
    dataIndex: "teeqEquipmentType",
    key: "teeqEquipmentType",
    width: 72,
    search: false,
  },
  {
    disable: true,
    title: "设备编码",
    dataIndex: "teeqEquipmentCode",
    key: "teeqEquipmentCode",
    width: 72,
    filters: true,
    onFilter: true,
  },
  {
    disable: true,
    title: "设备名称",
    dataIndex: "teeqEquipmentModel",
    key: "teeqEquipmentModel",
    filters: true,
    onFilter: true,
  },
  {
    disable: true,
    title: "设备型号",
    dataIndex: "teeqId",
    key: "teeqId",
    filters: true,
    onFilter: true,
  },
  {
    title: "使用单位",
    dataIndex: "depName",
    key: "depName",
    width: 48,
    search: false,
  },
  {
    title: "摆放位置",
    dataIndex: "teeqPlacementPosition",
    key: "teeqPlacementPosition",
    width: 48,
    search: false,
  },
  {
    title: "入厂时间",
    key: "teeqArrivalTime",
    dataIndex: "teeqArrivalTime",
    valueType: "dateTime",
    sorter: true,
    hideInSearch: true,
  },
  {
    title: "状态",
    dataIndex: "teeqEquipmentState",
    key: "teeqEquipmentState",
    width: 48,
    search: false,
  },
  {
    title: "归属人",
    dataIndex: "userName",
    key: "userName",
    width: 48,
    search: false,
  },
  {
    title: "校对时间",
    key: "teeqProofreadingTime",
    dataIndex: "teeqProofreadingTime",
    valueType: "dateTime",
    sorter: true,
    hideInSearch: true,
    search: false,
  },
  {
    title: "校对周期/天",
    dataIndex: "teeqProofreadingCycle",
    key: "teeqProofreadingCycle",
    width: 48,
    search: false,
  },
  {
    title: "操作",
    valueType: "option",
    key: "option",
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.depId);
        }}
      >
        编辑
      </a>,
      <a
        key="key"
        onClick={() => {
          action?.startEditable?.(record.depId);
        }}
      >
        删除
      </a>,
    ],
  },
];

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<GithubIssueItem>
      rowKey={(record) => record.depId}
      columns={columns}
      actionRef={actionRef}
      cardBordered
      /* ---------------查询表格--------------- */
      request={async (params = {}, sort, filter) => {
        console.log(params);
        let x0 = "",
          x1 = "",
          x2 = "";
        if (params.teeqEquipmentCode !== undefined) {
          x0 = params.teeqEquipmentCode;
        }
        if (params.teeqEquipmentModel !== undefined) {
          x1 = params.teeqEquipmentModel;
        }
        if (params.teeqId !== undefined) {
          x2 = params.teeqId;
        }

        let data = await request(
          `/material/selectTestingEquipment?teeqEquipmentCode=${x0}&teeqEquipmentModel=${x1}&teeqId=${x2}`
        );
        data = data.data.listFix;
        console.log(data);

        return { data, success: true };
      }}
      /* -------------------表格的修改+ 删除+保存---------------------  */
      editable={{
        type: "multiple",
        /* 保存修改的数据 */
        onSave: async (key, row, originRow): Promise<any> => {
          console.log(key, row, originRow);
          try {
            const data = await axios({
              url: "/api3/material/updateTestingEquipment",
              data: row,
              method: "post",
            });
            return console.log(data);
          } catch (err) {
            return console.log(err);
          }
        },
        /* 删除数据 */
        onDelete: (key, row): Promise<any> => {
          console.log(key, row);
          return axios({
            url: "/api3/material/deleteTestingEquipment",
            params: {teeqId:key},
            method: "post",
          })
            .then((data) => console.log(data))
            .catch((err) => console.log(err));
        },
      }}
      columnsState={{
        persistenceKey: "pro-table-singe-demos",
        persistenceType: "localStorage",
        onChange(value) {
          console.log("value: ", value);
        },
      }}
      search={{
        labelWidth: "auto",
      }}
      form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === "get") {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      toolBarRender={() => [
        <div>
          <ModalForm<{
            name: string;
            company: string;
          }>
            trigger={
              <Button type="primary">
                <PlusOutlined />
                新增
              </Button>
            }
            autoFocusFirstInput
            modalProps={{
              onCancel: () => console.log("run"),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
              console.log(values);
              axios({
                url: "/api3/material/addSupplier",
                data: { ...values, userid: 1 },
                method: "post",
              })
                .then((data) => console.log(data))
                .catch((error) => console.log(error));
              message.success("提交成功");
              return true;
            }}
          >
            <ProForm.Group>
              <ProFormSelect
                width={220}
                fieldProps={{
                  labelInValue: true,
                }}
                request={async () => [
                  { label: "全部", value: "all" },
                  { label: "未解决", value: "open" },
                  { label: "已解决", value: "closed" },
                  { label: "解决中", value: "processing" },
                ]}
                name="useMode"
                label="设备类别"
              />
              <ProFormText
                width={220}
                name="company"
                label="设备编号"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width={220}
                name="contract"
                label="设备名称"
                placeholder="请输入名称"
              />
              <ProFormText
                width={220}
                name="contract"
                label="设备型号"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width={220}
                name="contract"
                label="使用单位"
                placeholder="请输入名称"
              />
              <ProFormText
                width={220}
                name="contract"
                label="入厂时间"
                placeholder="请输入名称"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormSelect
                width={220}
                fieldProps={{
                  labelInValue: true,
                }}
                request={async () => [
                  { label: "在用", value: "all" },
                  { label: "报废", value: "open" },
                ]}
                name="useMode"
                label="状态"
              />
              <ProFormText
                width={220}
                name="contract"
                label="归属人"
                placeholder="消耗数量"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormSelect
                width={220}
                fieldProps={{
                  labelInValue: true,
                }}
                request={async () => [
                  { label: "全部", value: "all" },
                  { label: "未解决", value: "open" },
                  { label: "已解决", value: "closed" },
                  { label: "解决中", value: "processing" },
                ]}
                name="useMode"
                label="摆放位置"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width={220}
                name="contract"
                label="校对周期"
                placeholder="消耗数量"
              />
              <ProFormDatePicker
                name="date2"
                width={220}
                label="最新校对时间"
              />
            </ProForm.Group>
          </ModalForm>
        </div>,
        <div>
          <Button onClick={() => daochu()}>批量导出</Button>
          <Button onClick={() => daoru()}>批量导入</Button>
          <Button onClick={() => moban()}>模板下载</Button>
        </div>,
      ]}
    />
  );
};
/* 批量导出 */
function daochu(): void {
  axios({
    url: "/api3/material/derivedSuppliersExcel",
  })
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
}
/* 批量导入 */
function daoru(): void {
  axios({
    url: "/api3/material/downloadTemplate",
  })
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
}
/* 模板下载 */
function moban(): void {
  axios({
    url: "/api3/material/downloadTemplate",
  })
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
}


// request={async () => {
//   return [{ label: "全部", value: "all" },
//   { label: "未解决", value: "open" },
//   { label: "已解决", value: "closed" },
//   { label: "解决中", value: "processing" }]
// }}

